<template>
  <view class="pa-16 info-container" :style="{ backgroundColor }">
    <view class="fz-16 mb-8">
      <text>{{ activityInfo?.title }}</text>
    </view>
    <view class="baby-blue mb-8">
      <text class="ali-icon icon-shijian icon-style fz-16"></text>
      <text class="fz-14 ml-8">
        {{ formatToDateTime(activityInfo?.startTime, 'YYYY年MM月DD日 HH:mm') }}
      </text>
    </view>
    <view v-if="activityInfo?.addressName" class="baby-blue ov-1" @click="openLocation">
      <text class="ali-icon icon-weizhi icon-style fz-16"></text>
      <text class="fz-14 ml-8">
        {{ activityInfo?.addressName }}
      </text>
    </view>
    <view class="cutting-line h-1 my-12"></view>
    <view class="disFlx mb-12">
      <view class="mr-8 flex-1">
        <view class="fz-16 mb-8">
          <text>{{ ticketDetail?.ticketName }}</text>
          <text v-if="ticketDetail?.ticketName" class="ml-8" >x{{ modelValue }}</text>
        </view>
        <view class="fz-12">
          <template v-if="ticketDetail?.ticketType === TicketTypeEnum.CHARGE">
            <text class="fz-16">
              {{ getRealPrice(ticketDetail) }}
            </text>
            <text
              v-if="!isNullOrUnDef(ticketDetail?.discountPrice)"
              class="original-price fz-14 ml-8 baby-blue"
            >
              {{ formatMoney({ money: ticketDetail?.price || 0 }) }}
            </text>
          </template>
          <!-- <text v-else-if="ticketDetail?.ticketType === TicketTypeEnum.FREE" class="fz-16">
            免费
          </text> -->
        </view>
      </view>
    
    </view>
    <view class="baby-blue fz-12 disFlxAC" @click="emits('update:isOpen', !isOpen)">
      <text>报名说明</text>
      <text
        class="ali-icon ml-4"
        :style="{ transition: '.3s', transform: isOpen ? 'rotateZ(-180deg)' : 'rotateZ(0deg)' }"
      >
        &#xe67e;
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
  import type { IActivityListResData, IActivityTicketResult } from '@/api/activity/types';
  import { TicketTypeEnum } from '@/enums/activityStatusEnum';
  import { useLocation } from '@/hooks/core/useLocation';
  import { formatMoney } from '@/utils/number';
  import { propTypes } from '@/utils/propTypes';
  import { computed, type PropType } from 'vue';
  import { getBuyMaxNum, getRealPrice } from '../../components/activity';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { isNullOrUnDef } from '@/utils/is';

  const props = defineProps({
    activityInfo: Object as PropType<IActivityListResData>,
    ticketDetail: Object as PropType<IActivityTicketResult>,
    backgroundColor: propTypes.string,
    isOpen: propTypes.bool.def(false),
    modelValue: propTypes.number.def(1),
  });

  const emits = defineEmits(['update:isOpen', 'update:modelValue']);

  const { openLocation: uniOpenLocation } = useLocation();

  function openLocation() {
    const { activityInfo } = props;
    if (activityInfo) {
      uniOpenLocation({
        name: activityInfo.addressName,
        address: activityInfo.address,
        longitude: Number(activityInfo.longitude),
        latitude: Number(activityInfo.latitude),
      });
    }
  }

  const getMaxNum = computed(() => {
    const { ticketDetail } = props;
    if (ticketDetail) {
      return getBuyMaxNum(ticketDetail);
    }

    return void 0;
  });
</script>

<style lang="scss" scoped>
  .info-container {
    color: #fff;
    .cutting-line {
      background: rgba(255, 255, 255, 0.4);
    }
  }
  .baby-blue {
    color: #bed6ff;
  }

  .original-price {
    text-decoration-line: line-through;
  }
</style>
